<script>
/*
  column
    - label {String}
    - prop {String}
    - elProps {Object} ElTableColumn的属性
    - render {Function} 可自定义列的渲染内容
        render(h, {row, col, rowIdx, colIdx})
*/
const DEFAULT_TABLE_PROPS = {
  border: true
}
export default {
  name: 'GzTable',

  props: {
    // 要展示的列
    columns: {
      type: Array,
      required: true,
      validator: function (columns = []) {
        // 每列数据必须包含 label 和 prop
        return Array.isArray(columns) && columns.every((col) => col.label && col.prop)
      }
    },

    // 表格数据
    data: {
      type: Array,
      required: true
    },

    // ElTable 的 props
    elTableProps: {
      type: Object,
      default: () => ({})
    },

    columnAlign: {
      type: String,
      default: 'center'
    },

    useSelection: {
      type: Boolean,
      default: false
    },
    useIndex: {
      type: Boolean,
      default: false
    },
    // 自定义多选或单选
    selfSelection: {
      type: Boolean,
      default: false
    },
    // 开启单元格内超行showType
    showOverflowTooltip: {
      type: Boolean,
      default: true
    }
  },

  methods: {
    getElTable() {
      return this.$refs.elTable
    },
    // 2024-11-05 阻断问题if过多解决方案
    optimizeNewOne(allSlots, column) {
      return allSlots[column.prop] || allSlots['default']
    },
    optimizeNewTwo(allSlots, column) {
      return allSlots[`header-${column.prop}`] || allSlots['header']
    },
    optimizeNewThree(column) {
      return column.elProps || {}
    },
    optimizeNewFour(column, columnSlot) {
      return column.render || columnSlot
    },
    optimizeNewFive(column, columnSlot) {
      return column.render || columnSlot
    },
    optimizeNewSix(column, headerSlot) {
      return column.renderHeader || headerSlot
    },
    optimizeNewSeven(column, columnSlot, h, scope) {
      return column.render ? column.render(h, scope) : columnSlot(scope)
    },
    optimizeNewEight(column, headerSlot, h, scope) {
      return column.render ? column.renderHeader(h, scope) : headerSlot(scope)
    },
    optimizeNewNine(columns, selfSelection,indexColumn) {
      if (selfSelection) {
        columns.unshift(indexColumn)
      } else if (this.useSelection) {
        columns.splice(1, 0, indexColumn)
      } else {
        columns.unshift(indexColumn)
      }
    },
  },

  render(h) {
    const allSlot = { ...this.$slots, ...this.$scopedSlots }
    const { index, ...allSlots } = allSlot
    const columns = this.columns.map((column, idx) => {
      const scopedSlots = {}
      const columnSlot = this.optimizeNewOne(allSlots, column)
      const headerSlot = this.optimizeNewTwo(allSlots, column)
      const props = {
        label: column.label,
        prop: column.prop,
        align: this.columnAlign,
        fixed: column.fixed,
        'show-overflow-tooltip': this.showOverflowTooltip,
        ...(this.optimizeNewThree(column))
      }
      if (this.optimizeNewFour(column, columnSlot)) {
        scopedSlots['default'] = (props_) => {
          const scope = {
            row: props_.row,
            col: column,
            rowIdx: props_.$index /* 行序号 */,
            colIdx: idx /* 列序号 */
          }

          return this.optimizeNewSeven(column, columnSlot, h, scope)
        }
      }
      if (this.optimizeNewSix(column, headerSlot)) {
        scopedSlots['header'] = (_props) => {
          const scope = {
            row: _props.row,
            col: column,
            rowIdx: _props.$index /* 行序号 */,
            colIdx: idx /* 列序号 */
          }

          return this.optimizeNewEight(column, headerSlot, h, scope)
        }
      }
      return h('el-table-column', {
        key: column.prop,
        props,
        scopedSlots
      })
    })
    // 插入序号
    if (this.useIndex) {
      const scopedSlots = {}
      if (index) {
        scopedSlots['default'] = (props) => {
          const scope = {
            row: props.row,
            rowIdx: props.$index /* 行序号 */
          }
          return index(scope)
        }
      }
      const indexColumn = h('el-table-column', {
        props: {
          label: '序号',
          type: 'index',
          align: 'center'
        },
        scopedSlots
      })
      const selfSelection = columns.some((item) => item.prop === 'checkState')
      console.log(selfSelection, this.useSelection, 'selfSelection');
      this.optimizeNewNine(columns, selfSelection,indexColumn)
    }

    // 插入选择框列
    if (this.useSelection) {
      const selectionColumn = h('el-table-column', {
        props: {
          type: 'selection'
        }
      })
      columns.unshift(selectionColumn)
    }

    const table = h(
      'el-table',
      {
        ref: 'elTable',
        props: {
          ...DEFAULT_TABLE_PROPS,
          data: this.data,
          ...this.elTableProps
        },
        on: {
          ...this.$listeners
        }
      },
      columns
    )

    return table
  }
}
</script>
